<style>
    [v-cloak] {
        display: none;
    }
    .info-wrap h4 {
        text-align: center;
        font-size: 16px;

    }
    .img-list-item {
        width: 100px;
        height: 120px;
        margin-left: 5px;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .img_list_del_btn{
        width:100px;font-size: 15px;color: red;text-align: center;
    }
    .add_spec_wrap{
        display: flex;justify-content:flex-start;margin-left: 30px;
    }
</style>

<div class="row">
    <div class="col-md-12">
        <div class="box box-info">

            <!-- /.box-header -->
            <!-- form start -->
            <form id="good_handle_sub" action="/admin/shop/edit_goods_handle" method="post" accept-charset="UTF-8" class="form-horizontal"
                  pjax-container="">
                <div class="box-body">
                    <div class="fields-group">
                        <div class="form-group ">
                            <label class="col-sm-2  control-label">商品编码</label>
                            <div class="col-sm-8">
                                <div class="box box-solid box-default no-margin">
                                    <!-- /.box-header -->
                                    <input readonly value="{{$products_info?$products_info->id : ''}}" type="email" name="goods_id" class="form-control" id="goods_id" >
                                    <!-- /.box-body -->
                                </div>
                            </div>
                        </div>
                        <div class="form-group ">
                            <label class="col-sm-2  control-label">商品名称</label>
                            <div class="col-sm-8">
                                <div class="box box-solid box-default no-margin">
                                    <!-- /.box-header -->
                                    <input type="text" value="{{$products_info?$products_info->product_name : ''}}" name="goods_name" class="form-control" id="goods_name" >
                                    <!-- /.box-body -->
                                </div>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-sm-2  control-label">商品类目</label>
                            <div class="col-sm-3">
                                <div class="box box-solid box-default no-margin">
                                    <select name="category" class="form-control" id="category_sel">
                                        @foreach ($categories as $category)
                                            <option @if($products_info && $products_info->category_id == $category->id)  selected="selected" @endif value="{{$category->id}}">{{$category->category_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="month_wrap" @if($products_info && $products_info->category_id !=1) style="display: none"@else style="display:block;" @endif>
                                <label class="col-sm-2  control-label">有效期</label>
                                <div class="col-sm-3">
                                    <div class="box box-solid box-default no-margin">
                                        <!-- /.box-header -->
                                        <input type="text" value="{{$products_info?$products_info->vip_month : ''}}" name="vip_month" class="form-control" >
                                        <!-- /.box-body -->
                                    </div>

                                </div>
                                <span style="line-height: 40px;font-weight: bolder;">月</span>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-sm-2  control-label">推介文案</label>
                            <div class="col-sm-8">
                                <div class="box box-solid box-default no-margin">
                                    <!-- /.box-header -->
                                    <input name="desc" value="{{$products_info?$products_info->desc : ''}}" type="text" class="form-control" id="desc" placeholder="不得超过50字">
                                    <!-- /.box-body -->
                                </div>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-sm-2  control-label">服务保障</label>
                            <div class="col-sm-8">
                                <div class="box box-solid box-default no-margin">
                                    <!-- /.box-header -->
                                    <input name="promise" value="{{$products_info?$products_info->promise : ''}}" type="text" class="form-control" id="promise" >
                                    <!-- /.box-body -->
                                </div>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-sm-2  control-label">运费模板</label>
                            <div class="col-sm-8">
                                <div class="box box-solid box-default no-margin">
                                    <select name="ship_fee_temp" class="form-control" id="ship_fee_template">
                                        @foreach ($ship_fee_temp as $ship_fee_temp_item)
                                            <option @if($products_info && $products_info->ship_fee_temp == $ship_fee_temp_item->id)  selected="selected" @endif   value="{{$ship_fee_temp_item->id}}">{{$ship_fee_temp_item->temp_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-sm-2  control-label">轮播图片</label>
                            <div class="col-sm-8">
                                <input name="loop_imgs" value="{{$products_info?$products_info->images:''}}" type="hidden" id="loop_imgs_input" />
                                <div class="img-list-wrap" style="display: flex;justify-content:flex-start">
                                    @if($products_info)
                                        @foreach(explode(',',$products_info->images) as $key=>$value)
                                            <div class="img-list-item img-list-item{{$key}}" > <img width="100" height="100" src="{{$value}}" /><a class="img_list_del_btn" href="javascript:void(0)" style="width:100px;font-size: 15px;color: red;text-align: center" operate-target="img-list-item{{$key}}">删除</a></div>
                                        @endforeach
                                    @endif
                                    <div id="img_add_btn_wrap" style="width: 100px;height: 100px;margin-left: 5px; display:flex;justify-content: center"> <a id="add_img_btn" href="javascript:void(0)"  style="width:100px;font-size: 15px;text-align: center;line-height: 9.5;background: silver;"><i class="fa fa-plus-circle fa-5x"></i></a></div>

                                </div>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-sm-2 control-label">规格属性</label>
                            <div class="col-sm-8"></div>

                        </div>

                        <div class="form-group ">
                            <div class="row spec_wrap" style="margin-left: 60px;">
                                <div style="display: flex;justify-content:flex-start;margin-left: 30px;">
                                    <label style="width:100px;margin:5px;text-align: center" class="control-label">属性id</label>
                                    <label style="width:100px;margin:5px;text-align: center"  class="control-label">规格</label>
                                    <label style="width:100px;margin:5px;text-align: center"  class="control-label">库存</label>
                                    <label style="width:100px;margin:5px;text-align: center" class="control-label">市场价</label>
                                    <label style="width:100px;margin:5px;text-align: center" class="control-label">售价</label>
                                    <label style="width:100px;margin:5px;text-align: center" class="control-label">成本价</label>
                                </div>
                                <div class="add_spec_wrap">
                                    <input style="width:100px;margin:5px;" value="{{$products_info?$products_info->product_specific[0]->id:'' }}" readonly name="goods_spec_id[]" class="form-control" >
                                    <input style="width:100px;margin:5px;" value="{{$products_info?$products_info->product_specific[0]->specification:''}}" name="goods_spec[]" class="form-control" >
                                    <input style="width:100px;margin:5px;" value="{{$products_info?$products_info->product_specific[0]->stock:''}}" name="stock[]" class="form-control" >
                                    <input style="width:100px;margin:5px;" value="{{$products_info?$products_info->product_specific[0]->origin_price:''}}" name="market_price[]" class="form-control" >
                                    <input style="width:100px;margin:5px;" value="{{$products_info?$products_info->product_specific[0]->price:''}}" name="price[]" class="form-control" >
                                    <input style="width:100px;margin:5px;" value="{{$products_info?$products_info->product_specific[0]->cost:''}}" name="cost[]" class="form-control" >
                                    <a id="spec_input_add" href="javascript:void(0)" style="color:#0c0c0c;font-size: 15px;line-height: 45px;">新增一条</a>
                                </div>
                                @if($products_info)
                                    @foreach ($products_info->product_specific as $key=>$product_spec)
                                        @if($key != 0 )
                                            <div class="add_spec_wrap">
                                                <input style="width:100px;margin:5px;" value="{{$product_spec->id}}" readonly name="goods_spec_id[]" class="form-control" >
                                                <input style="width:100px;margin:5px;" value="{{$product_spec->specification}}" name="goods_spec[]" class="form-control" >
                                                <input style="width:100px;margin:5px;" value="{{$product_spec->stock}}" name="stock[]" class="form-control" >
                                                <input style="width:100px;margin:5px;" value="{{$product_spec->origin_price}}" name="market_price[]" class="form-control" >
                                                <input style="width:100px;margin:5px;" value="{{$product_spec->price}}" name="price[]" class="form-control" >
                                                <input style="width:100px;margin:5px;" value="{{$product_spec->cost}}" name="cost[]" class="form-control" >
                                                <a class="spec_input_delete" href="javascript:void(0)" style="color:red;font-size: 15px;line-height: 45px;">删除</a>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label">商品详情：</label>
                            <div class="col-sm-8"></div>

                        </div>
                        <div style="display: none;">
                            <input name="detail" type="text" id="goods_detail" />
                        </div>
                        <div id="doc_editor" style="height: 358px;width: 80%;margin-left: 80px;">

                                <p>请输入内容...</p>

                        </div>
                        <hr style="margin-top: 0px;">
                    </div>
                </div>
                <!-- /.box-body -->

                <div class="box-footer">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8">
                        <div class="btn-group pull-right">
                            <button type="button" id="btn-submit" class="btn btn-primary submit" class="">提交</button>
                        </div>

                        <div class="btn-group pull-left">
                            <button type="reset" class="btn btn-warning">撤销</button>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="_method" value="PUT" class="_method">
                <input type="hidden" name="_previous_" value="/admin/superagent/list" class="_previous_">
                <!-- /.box-footer -->
            </form>
        </div>

    </div>
</div>
<form method="post" id="form2" >
    <input type="file" name="photo" id="add_img" style="display: none;"/>
</form>

<link rel="stylesheet" href="/vendor/wangEditor/release/wangEditor.css">
<script src="/vendor/wangEditor/release/wangEditor.js"></script>
<script>
        $('#add_img_btn').on('click',function () {
            $('#add_img').click()
        })
        $('#add_img').on('change',function (e) {
            if($('#add_img').val()==''){
                console.log('kong')
                return
            }
            var index = layer.load(0, {shade: '#ccc'}); //0代表加载的风格，支持0-2
            //loading层
            $('#form2').ajaxSubmit({type:'post',url:'/admin/shop/upload_loop_img',success:function (res) {
                var size = $('.img-list-item').size();
                console.log(size)
                var index_to_set = size-1;
                $('#img_add_btn_wrap').before("<div class=\"img-list-item img-list-item"+ index_to_set +"\" > <img width=\"100\" height=\"100\" src=\""+ res.data +"\" /><a class=\"img_list_del_btn\" href=\"javascript:void(0)\" style=\"width:100px;font-size: 15px;color: red;text-align: center\" operate-target=\"img-list-item"+ index_to_set+"\">删除</a></div>")
                $('.img_list_del_btn').on('click',function (e) {
                    $('.'+$(this).attr('operate-target')).remove();
                    update_input_img_list();
                })
                update_input_img_list()
                layer.close(index);
            }})
        })
        $('.img_list_del_btn').on('click',function (e) {
            $('.'+$(this).attr('operate-target')).remove();
            update_input_img_list();
        })
        function update_input_img_list() {
            var img_arr = [];
            $('.img-list-item').each(function () {
                var img_str = $(this).find('img').attr('src')

                img_arr.push(img_str)
                $('#loop_imgs_input').val(img_arr.join(','));
                console.log(img_arr)
            })
        }

        $('#spec_input_add').on('click',function () {
            var count = $('.add_spec_wrap').size()-1;
            $('.spec_wrap').append("<div class=\"add_spec_wrap add_spec_wrap"+ count +"\">\n" +
                "<input readonly style=\"width:100px;margin:5px;\" name=\"goods_spec_id[]\" class=\"form-control\" >\n" +
                "<input style=\"width:100px;margin:5px;\" name=\"goods_spec[]\" class=\"form-control\" >\n" +
                "<input style=\"width:100px;margin:5px;\" name=\"stock[]\" class=\"form-control\" >\n" +
                "<input style=\"width:100px;margin:5px;\" name=\"market_price[]\" class=\"form-control\" >\n" +
                "<input style=\"width:100px;margin:5px;\" name=\"price[]\" class=\"form-control\" >\n" +
                "<input style=\"width:100px;margin:5px;\" name=\"cost[]\" class=\"form-control\" >\n" +
                "<a class=\"spec_input_delete\" del_target=\"add_spec_wrap0\"  href=\"javascript:void(0)\" style=\"color:red;font-size: 15px;line-height: 45px;\">删除</a>\n" +
                "</div>")

            $('.spec_input_delete').on('click',function (e) {
                $(this).parent().remove();
            })
        })

        $('#category_sel').on('change',function (e) {
            if($(this).val()==1) {
                $('.month_wrap').show()
            }else{
                $('.month_wrap').hide()
            }
        });

        $(function () {
            var E = window.wangEditor
            var editor2 = new E('#doc_editor')
            editor2.customConfig.uploadImgServer = '/admin/shop/upload_detail_img'
            editor2.create()
            @if($products_info && $products_info->detail)
                editor2.txt.html("{!! addslashes($products_info->detail) !!}");
            @endif
            /*var editor = new wangEditor('doc_editor');
            editor.create();
            console.log('doc——editor')*/
            $('#btn-submit').on('click',function (e) {
                var index = layer.load()
                e.preventDefault()
                var content = editor2.txt.html()
                $('#goods_detail').val(content)
                $('#good_handle_sub').ajaxSubmit({
                    success:function(res){
                        layer.close(index)
                        if(res.code==0) {
                            layer.msg('添加或更新成功')
                            location.href= '/admin/shop/goods_list';
                        }
                        else{
                            layer.alert('添加或更新失败', {
                                skin: 'layui-layer-molv' //样式类名
                                ,closeBtn: 0
                            });

                        }
                    }
                });
            })
        })
</script>
